<template>
  <page class="product-execu-orderdetail">
    <template slot="title">工序工单加工详情</template>
    <slot name="top">
      <div class="table-page-search-wrapper">
        <p-form layout="inline">
          <p-row :gutter="24">
            <p-col :xl="8" :sm="12">
                <p-form-item label="工序工单">
                  <p-input :value="item.processBillNo||item.processbillno" disabled />
                </p-form-item>
              </p-col>
              <p-col :xl="8" :sm="12">
                <p-form-item label="产品编码">
                  <p-input :value="item.productcode || item.productCode" disabled />
                </p-form-item>
              </p-col>
              <p-col :xl="8" :sm="12">
                <p-form-item label="产品描述">
                  <p-input :value="item.productname || item.productName" disabled />
                </p-form-item>
              </p-col>
          </p-row>
        </p-form>
      </div>
    </slot>
    <p-row :gutter="14">
      <p-col :sm="8">
        <div class="product-execu-amount product-execu-amount__primary">
          <p-statistic :value="amount.qualified" title="合格数量" />
        </div>
      </p-col>
      <p-col :sm="8">
        <div class="product-execu-amount product-execu-amount__pending">
          <p-statistic :value="amount.pending" title="待加工数量" />
        </div>
      </p-col>
      <p-col :sm="8">
        <div class="product-execu-amount product-execu-amount__danger">
          <p-statistic :value="amount.unqualified" title="不合格数量" />
        </div>
      </p-col>
    </p-row>
  </page>
</template>

<script>
import mixins from './info-mixins'
import { getAction } from '@/api/manage'

export default {
  mixins: [mixins],
  data() {
    return {
      amount: {
        qualified: 0,
        pending: 0,
        unqualified: 0
      }
    }
  },
  watch: {
    item() {
      this.getData()
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      if (this.item && this.item.id) {
        const params = {
          processBillId: this.item.id
        }
        getAction('/mes-manufacture/mfStartWork/getQtybyProcessBillId', params).then(res => {
          const { qualified, pending, unqualified } = res.data || {}
          this.amount = {
            qualified: qualified || 0,
            pending: pending || 0,
            unqualified: unqualified || 0
          }
        })
      } else {
        this.amount = {
          qualified: 0,
          pending: 0,
          unqualified: 0
        }
      }
    }
  }
}
</script>
